<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
    <title></title>
</head>
<body>
<script src="./js/hammer.min.js"></script>
<script src="./js/zepto.min.js"></script>
<script src="./js/three.min.js"></script>
<script src="./js/Detector.js"></script>
<script src="./js/OrbitControls.js"></script>
<script src="./js/IndoorMap.js"></script>
<script src="./js/Projector.js"></script>
<script src="./js/stats.min.js"></script>
<script src="./js/IndoorMap2d.js"></script>
<script src="./js/IndoorMap3d.js"></script>
<script src="./js/Theme.js"></script>
<link href="./css/indoor3D.css" rel="stylesheet">
<div id="p" style="width: 100px;height: 100px"></div>

<!--<div id="indoor3d" style="width: 100%; height:500px;top:0px; left: 0px; position: absolute"></div>-->
<script>
        var parent=document.getElementById("p");
  var params = {
    // mapDiv:"indoor3d",
    dim: "3d",
    zoom: 10 ,
    userPanSpeed: 0.03,
    size:[1200,800],
    parent:parent
  }
  var map = IndoorMap(params);
  //    map.load('data/北京-7-侨福芳草地购物中心.json', function(){
  map.load('data/10097.json?time=' + new Date().getTime(), function () {
    //map.setTheme(testTheme);
    map.showAreaNames(true).setSelectable(true);
    var ul = IndoorMap.getUI(map);
    document.body.appendChild(ul);
    // map.showFloor(1);
    // map.shoshowAllFloors();
  });

  var position = 70;
  setTimeout(cutDown, 1000);


  function cutDown() {
    position = position + 1;
    map.setUserPosition({floorId: 1, x: position, y: position});
    setTimeout(cutDown, 1000);
  }
</script>
<!-- buttons just for test-->
<div class="testButton">
    <ul>
        <!--   <li onclick="map.zoomIn(1.2)">+</li>
          <li onclick="map.zoomOut(0.8)">-</li> -->
        <li onclick="map.setTopView()">2D模式</li>
        <li onclick="map.setDefaultView()">3D模式</li>
        <!--<li onclick="map.setNavigationPath({floorId:3,x:111,y:122},{floorId:3,x:66,y:49})">导航</li>-->
        <li onclick="map.setNonNavigationMarks([{floorId:3,x:71,y:68},{floorId:3,x:76,y:49},{floorId:2,x:2,y:-6},{floorId:2,x:6,y:-4},{floorId:1,x:1,y:-2},{floorId:1,x:6,y:-4}])">设置小人们</li>
        <li onclick="map.clearNonNavigationMarks()">取消小人们</li>

    </ul>
</div>
</body>
</html>
